@mixin ready() {
    $active-checkbox-color: rgb(14, 187, 104);
    $checkbox-border: 5px;
    $checkbox-width: 25px;
    $checkbox-height: 25px;
    $checkbox-inner-width: 15px;
    $checkbox-inner-height: 15px;
    $checkbox-inner-position: 5px _ _ 5px;
    $checkbox-size:  $checkbox-width + $checkbox-border * 2;
    $label-padding-left: $checkbox-size + 20px;
    $label-padding-top: 5px;


    .auc-checkbox {
        position: relative;
        height: $checkbox-size;
        > label{
            display: block;
            position: relative;
            padding-left: $label-padding-left;
            padding-top: $label-padding-top;
            z-index: 9;
            cursor: pointer;
            transition: all 0.25s linear;
        }
        
        &__check{
            display: block;
            position: absolute;
            border: $checkbox-border solid #AAAAAA;
            height: $checkbox-height;
            width: $checkbox-width;
            z-index: 5;
            top: 0;
            transition: border .25s linear;
            box-sizing: content-box;
        }

        &__check::before {
            display: block;
            position: absolute;
            content: '';
            height: $checkbox-inner-height;
            width: $checkbox-inner-width;
            position: $checkbox-inner-position;
            margin: auto;
            transition: background 0.25s linear;
        }
    
        
        > input[type=checkbox]{
            position: absolute;
            visibility: hidden;
        }
        
        input[type=checkbox]:checked ~ &__check {
            border: 5px solid $active-checkbox-color;
        }
        
        input[type=checkbox]:checked ~ &__check::before{
            background: $active-checkbox-color;
        }
        
        input[type=checkbox]:checked ~ label{
            color: $active-checkbox-color;
        }
    }
}

@include ready();